import React, {Component} from 'react';
import {
  Card,
  List,
  Button,
  Dropdown,
  Menu,
  BackTop,
  Row,
  Col,
  Icon,
} from 'antd';
import {Link} from 'react-router-dom';

import PageHeader from 'ant-design-pro/lib/PageHeader';

import AddCarModel from './carModel';
import styles from './index.less';
import VehicleModel from './editVehicleModel';

import {openPanel} from '@bizfe/biz-rc-panel';
import myaxios, {get, put, post, deleteAxios} from 'common/fetch';
import {GET_SPECLIST_URL, GET_MODEL_DETAIL_URL} from 'constant/url';

const MoreBtn = ({id, modelId}) => (
  <Dropdown
    overlay={
      <Menu>
        <Menu.Item>
          <Link to={`/vehicle/model/${modelId}/spec/${id}`}>配置列表</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to={{pathname: `/article`, search: `?carId=${id}`}}>相关文章</Link>
        </Menu.Item>
      </Menu>
    }>
    <a>
      更多 <Icon type="down" />
    </a>
  </Dropdown>
);
const ModelItem = ({img, name, updateAt, id, modelId}) => {
  return (
    <List.Item
      actions={[
        <Link to={`/vehicle/model/${modelId}/spec/${id}`}>配置列表</Link>,
        <MoreBtn id={id} modelId={modelId} />,
      ]}>
      <List.Item.Meta />
      <div className={styles.listContent}>
        <div className={styles.listContentItem}>
          <img src={img} style={{width: 160, height: 90}} />
        </div>
        <div className={styles.listContentItem}>
          <p className={styles.listSpecTitle}>{name}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>最后编辑时间</span>
          <p>{updateAt}</p>
        </div>
      </div>
    </List.Item>
  );
};

class ModelList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      brandId: '',
      modelDetail: {},
      modelList: [],
    };
  }
  componentDidMount() {
    const {match} = this.props;

    get(GET_SPECLIST_URL, {
      modelId: match.params.modelId || '',
    }).then(res => {
      this.setState({
        modelList: res.list,
      });
    });
    this.getModelDetail();
  }
  getModelDetail = () => {
    const {match} = this.props;
    get(GET_MODEL_DETAIL_URL, {
      modelId: match.params.modelId || '',
    }).then(res => {
      this.setState({
        modelDetail: res && res[0],
      });
    });
  };
  updateState = obj => {
    const postDetail = {...this.state.postDetail, ...obj};

    this.setState({
      postDetail,
    });
  };
  hidePanel = () => {
    this.panelObj.close();
  };
  editVehicleModel() {
    let currentIndex = 800;
    const config = {
      customClass: styles['.biz-panel'],
      marginLeft: 200,
      top: '0',
      theme: '',
      leftCloseAble: true,
      // titleAble: true,
      title: '设置分类',
      content: (
        <VehicleModel
          modelDetail={this.state.modelDetail}
          reloadModelDetail={this.getModelDetail}
          hidePanel={this.hidePanel}
        />
      ),
      buttonsAble: false,
      buttons: [
        {
          value: '确定',
          isSubmit: true,
        },
        {
          value: '取消',
        },
      ],
      onBeforeClose: function() {
        //me.getMsgList(me.getQuery());
        return true;
      },
      onCancelFunc: function() {
        return true;
      },
      submitFunc: function(closeFunc) {
        closeFunc();
      },
      zIndex: currentIndex,
    };
    this.panelObj = openPanel(config, document.body);
  }
  render() {
    const {modelList, modelDetail} = this.state;
    const {match} = this.props;

    return (
      <div>
        <PageHeader
          title={modelDetail.modelName}
          content="所有型号列表"
          action={
            <Button type="primary" onClick={this.editVehicleModel.bind(this)}>
              <Icon />编辑车型
            </Button>
          }
          breadcrumbList={[
            {
              title: '车库',
              href: '/vehicle',
            },
            {
              title: '型号列表',
            },
          ]}
          linkElement={Link}
          className={styles.pageHeader}
        />
        <div
          className={`${styles.content} ${styles[
            'home-container'
          ]} ${styles.standardList}`}>
          <BackTop />
          <Card style={{margin: 24}} bordered={false}>
            <List
              size="large"
              rowKey="id"
              split={true}
              dataSource={modelList}
              renderItem={item => (
                <ModelItem {...item} brandId={match.params.brandId} />
              )}
            />
          </Card>
          <AddCarModel visible={false} />
        </div>
      </div>
    );
  }
}

export default ModelList;
